<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="content-language" content="en">
	<title>MooEditable for Mootools 1.11</title>
	<style type="text/css">
		body{
			font-family: sans-serif;
		}
		.mooeditable{
			border: 2px solid #ddd;
		}
		#textarea-1{
			width: 700px;
			height: 200px;
			padding: 10px;
		}
		#textarea-2{
			width: 600px;
			height: 100px;
			margin: 20px;
		}
		.mooeditable-toolbar{
				color: inherit;
				background-color: #eee;
				padding: 2px ;
				height: 1%;
				border-right:1px solid #D0C8C8;
				border-left:1px solid #D0C8C8;
				border-top:1px solid #D0C8C8;
		}

		.mooeditable-toolbar:after{
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
		}

		.mooeditable-toolbar .toolbar-button{
				cursor: pointer;
				border: 0;
				width: 24px;
				height: 24px;
				margin: 2px;
				float: left;
				text-indent: -999em;
				background-color: transparent;
				background-repeat: no-repeat;
				background-position: 4px 4px;
				overflow: hidden;
		}

		.mooeditable-toolbar .toolbar-button:hover,
		.mooeditable-toolbar .toolbar-button.hover{
				color: inherit;
				background-color: #fff;
		}

		.mooeditable-toolbar .toolbar-button.disabled{
				cursor: default;
		}

		.mooeditable-toolbar .toolbar-button.disabled:hover{
				color: inherit;
				background-color: transparent;
		}

		.mooeditable-toolbar .toolbar-separator{
				width: 1px;
				height: 24px;
				margin: 2px;
				float: left;
				text-indent: -999em;
				color: inherit;
				background-color: #fafafa;
		}

		.mooeditable-toolbar .bold-button{
				background-image: url(../css/images/format-text-bold.png);
		}
		.mooeditable-toolbar .italic-button{
				background-image: url(../css/images/format-text-italic.png);
		}
		.mooeditable-toolbar .underline-button{
				background-image: url(../css/images/format-text-underline.png);
		}
		.mooeditable-toolbar .strikethrough-button{
				background-image: url(../css/images/format-text-strikethrough.png);
		}
		.mooeditable-toolbar .insertunorderedlist-button{
				background-image: url(../css/images/format-bullet-list.png);
		}
		.mooeditable-toolbar .insertorderedlist-button{
				background-image: url(../css/images/format-number-list.png);
		}
		.mooeditable-toolbar .indent-button{
				background-image: url(../css/images/format-indent-more.png);
		}
		.mooeditable-toolbar .outdent-button{
				background-image: url(../css/images/format-indent-less.png);
		}
		.mooeditable-toolbar .undo-button{
				background-image: url(../css/images/edit-undo.png);
		}
		.mooeditable-toolbar .redo-button{
				background-image: url(../css/images/edit-redo.png);
		}
		.mooeditable-toolbar .createlink-button{
				background-image: url(../css/images/format-add-link.png);
		}
		.mooeditable-toolbar .unlink-button{
				background-image: url(../css/images/format-remove-link.png);
		}
		.mooeditable-toolbar .urlimage-button{
				background-image: url(../css/images/image-x-generic.png);
		}
		.mooeditable-toolbar .toggleview-button{
				background-image: url(../css/images/action-toggle-view.png);
		}
		.mooeditable-toolbar .refreshiframe-button{
				background-image: url(../css/images/view-refresh.png);
		}
		
	</style>

	<script type="text/javascript" src="mootools-1.11.js"></script>
	<script type="text/javascript" src="MooEditable-1.11.js"></script>
	<script type="text/javascript" language="JavaScript">
	<!--
		window.addEvent('load', function(){
			var Editables = [];
			$$('.mooeditable').mooEditable();
		})
	//-->
	</script>
</head>
<body>
	<h3>MooEditable</h3>
	<p>This is a test page for MooEditable (mootools 1.11 compatable).</p>
	
	<label for="textarea-1">Textarea 1</label>
	<textarea class="mooeditable" id="textarea-1" name="editable1">
	&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
	</textarea>

	<label for="textarea-2">Textarea 2</label>
	<textarea class="mooeditable" id="textarea-2" name="editable2"></textarea>



</body>
</html>
